<template>
    <el-dialog v-model="show" title="新增应收账款" width="20%" align-center @close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>
            <el-form-item label="客户名称:" >
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="对账/开票日期:" >
                <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" />
            </el-form-item>
            <el-form-item label="对账发票金额:" >
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="发票号码:" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

interface RuleForm {
    name: string
    region: string
    count: string
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    region: '',
    count: '',
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: ['blur', 'change'],
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: ['blur', 'change'],
        },
    ],
})

const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', true);

    handleClose();
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>